import {NodeElement} from "../pages/HadaCanvasPoster/components/hada-canvas-poster/types";

const PSD = require('psd')


function chooseFile() {
    return new Promise(resolve => {
        let fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = '*/*';
        fileInput.click();
        fileInput.onchange = () => {
            let file = fileInput.files[0];
            let fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = () => {
                fileInput.remove();
                resolve(fileReader.result);
            }
        }
    })
}

function base64toBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

export async function openPsd(url){
    const fileUrl = await chooseFile();
    const psdObj = await PSD.fromURL(fileUrl);
    const psdInfo = psdObj.tree();
    let children = psdInfo.children();
    const data = {
        width: psdInfo.width,
        height: psdInfo.height,
        nodeElements: [],
        faces: [],
    }
    const nodes = [];
    function _readPsdInfo(node){
        const childs = node.children();
        const nodeInfo = node.export();
        //整个组不显示 或元素不显示
        console.log(node,nodeInfo.name,nodeInfo)
        if(!node.isRoot() && !nodeInfo.visible){
            return;
        }

        if(childs.length === 0){
            nodes.push({node,nodeInfo});
            return;
        }

        childs.forEach(item=>{
            _readPsdInfo(item);
        })
    }

    _readPsdInfo(psdInfo);
    console.log(nodes,'nodes')
    nodes.forEach(item=>{

        const node = item.node;
        if(!node.visible){
            return
        }
        const childrenInfo = item.nodeInfo;
        if(childrenInfo.text){
           //文字组件
            let {left,top,width,height} = childrenInfo;
            width += 10;
            height += 10;
            const font = childrenInfo.text.font;
            const color = font.colors[0];
            const text ={
                "resourceType": "text",
                "text": childrenInfo.text.value,
                name: childrenInfo.name,
                "css": {
                    left,top,width,height,
                    "zIndex": 0,
                    "borderWidth": 0,
                    "borderRadius": 0,
                    "lineSpacing": 0,
                    "opacity": childrenInfo.opacity,
                    "font": `${Math.ceil(font.sizes[0])}rpx ${font.names.join(',')}`,
                    "shadowBlur": 0,
                    "maxLine": 1,
                    "textAlign": font.alignment[0],
                    "color": `rgba(${color[0]},${color[1]},${color[2]},${color[3]/255})`,
                    "textOverflow": "...",
                }
            }
            data.nodeElements.unshift(text);
        }else{
            //图片组件
            const {left,top,width,height} = childrenInfo;
            const image = {
                "resourceType": "image",
                name: childrenInfo.name,
                "url": URL.createObjectURL(base64toBlob(node.toPng().src)),
                "css": {
                    left,top,width,height,
                    "opacity": childrenInfo.opacity,
                }
            }

            data.nodeElements.unshift(image);
        }
    })
    return data;
}
